<template>
    <div class="page-notice">
        <notice-topbar :isBackIcon="true" :isShareIcon="true" :isHome="false" @onShare="onShare"></notice-topbar>
        <notice-content :data="this.data" v-show="show"></notice-content>
        <notice-comment v-show="show" :commentList="commentList" @onReply="onReply"></notice-comment>
        <notice-input v-show="show" :like="like" :collect="collect" :num="num" :showInput="showInput" :commentInfo="commentInfo" :tip="tip" @onComment="onComment" @onLike="onLike" @onCollect="onCollect" @againComment="againComment"></notice-input>
        <notice-skeleton v-show="!show"></notice-skeleton>
        <notice-share :shareShow="shareShow" title="立即分享给好友" @onBg="onBg">
            <div class="item" v-for="(item,index) in options" :key="index" @click="onSelect(item)">
                <div class="icon">
                    <i class="iconfont" :class="item.icon"></i>
                </div>
                <div class="text">{{item.name}}</div>
            </div>
        </notice-share>
        <notice-toast :loading="toasts.loading" :toast="toasts.toast" :text="toasts.text" :icon="toasts.icon" :iconfont="toasts.iconfont"></notice-toast>
    </div>
</template>

<script>
import NoticeTopbar from '../components/Common/Topbar/Index'
import NoticeContent from '../components/Notice/Index'
import NoticeComment from '../components/Notice/Comment'
import NoticeInput from '../components/Notice/Input'
import NoticeSkeleton from '../components/Common/Skeleton/Index'
import NoticeShare from '../components/Common/Share/Index'
import NoticeToast from '../components/Common/Toast/Index'
export default {
    name: 'PageNotice',
    components: {
        NoticeTopbar,
        NoticeContent,
        NoticeComment,
        NoticeInput,
        NoticeSkeleton,
        NoticeShare,
        NoticeToast
    },
    data() {
        return {
            data: {},
            commentList: [],
            show: false,
            shareShow: false,
            options: [
                { name: 'QQ', icon: 'icon-icon' },
                { name: '微信', icon: 'icon-weixin' },
                { name: '微博', icon: 'icon-weibo' },
                { name: '复制链接', icon: 'icon-link' }
            ],

            toasts: {
                loading: false,
                toast: false,
                text: '',
                icon: false,
                iconfont: ''
            },
            num:'',
            showInput: false,
            tip: '友善发言,温暖评论区',
            commentInfo: {},
            like: false,
            collect: false
        }
    },
    methods: {
        //获取文章内容
        getNoticeOne() {
            this.ToastLoading()
            this.$get(`notice/one.php?notice_id=${this.$route.params.id}`)
            .then((res) => {
                if(res[0].id) {
                    this.data = res[0]
                    this.show = true
                    this.ToastClear()
                }else{
                    this.Toast('文章不存在','icon-stop',800)
                    setTimeout(() => {
                        this.$store.commit('setAnimate','turn-off')
                        this.$router.push('/')
                    },1000)
                }
            })
        },
        //获取评论内容
        getComment() {
            this.$get(`notice/comment/list.php?notice_id=${this.$route.params.id}`)
            .then((res) => {
                this.commentList = res
            })
        },
        //获取评论数量
        getCommentNum() {
            this.$get(`notice/comment/num.php?notice_id=${this.$route.params.id}`)
            .then((res) => {
                if(res.num < 99) {
                    this.num = res.num
                }else {
                    this.num = '99+'
                }
            })
        },
        //获取是否点赞收藏
        getLikeCollect() {
            if(this.$store.state.userInfo) {
                this.$post('notice/like.php',{
                    noticeId: this.$route.params.id,
                    userId: this.$store.state.userInfo.id
                })
                .then((res) => {
                    if(res.code == 400) {
                        this.Toast(`${res.desc}`,'icon-meh',800)
                        this.$store.commit('setUserInfo','')
                    }else{
                        if(res.like == null || res.like == 0) {
                            this.like = false
                        }else {
                            this.like = true
                        }
                        if(res.collect == null || res.collect == 0) {
                            this.collect = false
                        }else {
                            this.collect = true
                        }
                    }
                })
            }
        },
        //点击点赞
        onLike() {
            if(this.$store.state.userInfo) {
                this.$post('notice/editlike.php',{
                    noticeId: this.$route.params.id,
                    userId: this.$store.state.userInfo.id,
                    status: this.like ? 0 : 1
                })
                .then((res) => {
                    if(res.code == 400) {
                        this.Toast(`${res.desc}`,'icon-meh',800)
                        this.$store.commit('setUserInfo','')
                    }else {
                        this.like = !this.like
                    }
                })
            }else {
                this.Toast('请先登录','icon-navigation',800)
            }
        },
        //点击收藏
        onCollect() {
            if(this.$store.state.userInfo) {
                this.$post('notice/editcollect.php',{
                    noticeId: this.$route.params.id,
                    userId: this.$store.state.userInfo.id,
                    status: this.collect ? 0 : 1
                })
                .then((res) => {
                    if(res.code == 400) {
                        this.Toast(`${res.desc}`,'icon-meh',800)
                        this.$store.commit('setUserInfo','')
                    }else {
                        this.collect = !this.collect
                    }
                })
            }else {
                this.Toast('请先登录','icon-navigation',800)
            }
        },
        //评论更改状态
        againComment() {
            this.Toast('评论成功','icon-smile',800)
            this.getComment()
            this.getCommentNum()
        },
        onShare() {
            this.shareShow = true
        },
        onBg(e) {
            this.shareShow = e
        },
        onSelect(option) {
            if(option.icon == "icon-link") {
                const url = window.location.href
                var input = document.createElement("input")
                input.value = url
                document.body.appendChild(input)
                input.select()
                document.execCommand("Copy")
                document.body.removeChild(input)
                this.Toast('复制成功','icon-select-bold',800)
                this.shareShow = false
            }
        },
        onReply(e) {
            if(this.$store.state.userInfo.id) {
                this.tip = `回复 ${e.nickname}:`
                this.commentInfo = e
                this.showInput = true
            }else {
                this.Toast('请先登录','icon-navigation',1000)
            }
        },
        onComment(e) {
            if(this.$store.state.userInfo.id) {
                this.tip = '友善发言,温暖评论区'
                this.commentInfo = {}
                this.showInput = e
            }else {
                this.Toast('请先登录','icon-navigation',1000)
            }
        },
        //弹窗
        Toast(text,iconfont,time) {
            this.toasts.loading = false
            this.toasts.text = text
            this.toasts.icon = true
            this.toasts.iconfont = iconfont
            this.toasts.toast = true
            window.setTimeout(() => {
                this.toasts.toast = false
            },time);
        },
        ToastLoading() {
            this.toasts.loading = true
            this.toasts.icon = false
            this.toasts.text = '加载中...'
            this.toasts.toast = true
        },
        ToastClear() {
            this.toasts.toast = false
        }
    },
    created() {
        this.getCommentNum()
        this.getNoticeOne()
        this.getLikeCollect()
        this.getComment()
    }
}
</script>

<style scoped>
.page-notice{
    position: fixed;
    width:100vw;
    height:100vh;
    overflow: auto;
    padding:0.9rem 0 0.84rem 0;
    background:#fff;
}
.page-notice .item{
    width:20%;
    display: inline-block;
    text-align: center;
}
.page-notice .item:nth-child(1) .icon{
    background:#37BAFA;
}
.page-notice .item:nth-child(2) .icon{
    background:#07C160;
}
.page-notice .item:nth-child(3) .icon{
    background:#EE585E;
}
.page-notice .item:nth-child(4) .icon{
    background:#F2F3F5;
}
.page-notice .item:nth-child(4) .icon .iconfont{
    color:#666;
}
.page-notice .item .icon{
    width:0.96rem;
    height:0.96rem;
    line-height:0.7;
    border-radius:100%;
    text-align: center;
    margin:0 auto;
    background:#333;
    margin-bottom:0.1rem;
}
.page-notice .item .icon .iconfont{
    font-size:0.48rem;
    color:#fff;
}
.page-notice .item .text{
    font-size:0.26rem;
    font-weight:600;
}
</style>